<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>“造”了一台电脑</title>
    <style>
        *,
        *::after,
        *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transform-style: preserve-3d;
        }

        body {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1a1919;
            overflow: hidden;
            font-family: sans-serif;
            font-weight: bolder;
            color: rgba(255, 255, 251, 0.7);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .main {
            width: 800px;
            height: 600px;
            position: relative;
            cursor: pointer;
            margin-top: 200px;
        }

        @media (max-width:1000px) {
            .main {
                transform: scale(0.75);
            }
        }

        @media (max-width:800px) {
            .main {
                transform: scale(0.5);
            }
        }

        @media (max-width:700px) {
            .main {
                transform: scale(0.4);
            }
        }

        @media (max-width:500px) {
            .main {
                transform: scale(0.3);
            }
        }

        .flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .face {
            position: absolute;
        }

        .screen {
            width: 303.0303030303px;
            height: 240px;
            transform: translateZ(100px) translateY(-200px) translateZ(50px) rotateX(270deg);
            background-color: #a9dffd;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(169, 223, 253, 0.8), 0 0 10px rgba(169, 223, 253, 0.7), 0 0 15px rgba(169, 223, 253, 0.6), 0 0 20px rgba(169, 223, 253, 0.5), 0 0 40px rgba(169, 223, 253, 0.4), 0 0 60px rgba(169, 223, 253, 0.3);
            animation: screen 1s ease-in alternate infinite;
        }

        .keyboard {
            width: 500px;
            height: 160px;
            transform: perspective(10000px) rotateX(50deg) rotateZ(-25deg);
        }

        .keyboard__front {
            width: 500px;
            height: 25px;
            transform: rotateX(-90deg) translateZ(80px);
            background-color: #9c9c9c;
        }

        .keyboard__back {
            width: 500px;
            height: 25px;
            transform: rotateX(90deg) translateZ(80px);
            background-color: #fffffb;
        }

        .keyboard__top {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 500px;
            height: 160px;
            transform: rotateY(0deg) translateZ(12.5px);
            background-image: linear-gradient(to bottom, #dbf2fe, #343232);
        }

        .keyboard__bottom {
            width: 500px;
            height: 160px;
            transform: rotateY(180deg) translateZ(12.5px);
            background-color: #eae7e5;
            box-shadow: -20px 40px 0 #0d0c0c, 0px 40px 0 #0d0c0c, 5px 0px 0 #0d0c0c, 5px 40px 0 #0d0c0c;
        }

        .keyboard__right {
            width: 25px;
            height: 160px;
            transform: rotateY(90deg) translateZ(250px);
            background-color: #fffffb;
        }

        .keyboard__left {
            width: 25px;
            height: 160px;
            transform: rotateY(90deg) translateZ(-250px);
            background-color: #eae7e5;
        }

        .keys {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            transform: translateZ(7.5px);
            padding: 0 2px;
        }

        .key {
            width: 30px;
            height: 27px;
            transition: 0.05s ease;
        }

        .key--w2 {
            width: 60px;
        }

        .key--w3 {
            width: 90px;
        }

        .key--w6 {
            width: 195px;
        }

        .key__front {
            width: 30px;
            height: 15px;
            transform: rotateX(-90deg) translateZ(13.5px);
            background-color: #838383;
        }

        .key__front--w2 {
            width: 60px;
        }

        .key__front--w3 {
            width: 90px;
        }

        .key__front--w6 {
            width: 195px;
        }

        .key__back {
            width: 30px;
            height: 15px;
            transform: rotateX(90deg) translateZ(13.5px);
            background-color: #fffffb;
        }

        .key__back--w2 {
            width: 60px;
        }

        .key__back--w3 {
            width: 90px;
        }

        .key__back--w6 {
            width: 195px;
        }

        .key__top {
            width: 30px;
            height: 27px;
            transform: rotateY(0deg) translateZ(7.5px);
            background-color: #fffffb;
            background-image: linear-gradient(to bottom, #f4fbff, #fffffb);
        }

        .key__top--w2 {
            width: 60px;
        }

        .key__top--w3 {
            width: 90px;
        }

        .key__top--w6 {
            width: 195px;
        }

        .key__bottom {
            width: 30px;
            height: 27px;
            transform: rotateY(180deg) translateZ(7.5px);
            background-color: #838383;
        }

        .key__bottom--w2 {
            width: 60px;
        }

        .key__bottom--w3 {
            width: 90px;
        }

        .key__bottom--w6 {
            width: 195px;
        }

        .key__right {
            width: 15px;
            height: 27px;
            transform: rotateY(90deg) translateZ(15px);
            background-color: #838383;
        }

        .key__right--w2 {
            transform: rotateY(90deg) translateZ(30px);
        }

        .key__right--w3 {
            transform: rotateY(90deg) translateZ(45px);
        }

        .key__right--w6 {
            transform: rotateY(90deg) translateZ(97.5px);
        }

        .key__left {
            width: 15px;
            height: 27px;
            transform: rotateY(90deg) translateZ(-15px);
            background-image: linear-gradient(to bottom, #c5c5c5, #b8b8b8);
        }

        .key__left--w2 {
            transform: rotateY(90deg) translateZ(-30px);
        }

        .key__left--w3 {
            transform: rotateY(90deg) translateZ(-45px);
        }

        .key__left--w6 {
            transform: rotateY(90deg) translateZ(-97.5px);
        }

        .face--key-b1 {
            background: #a9dffd;
        }

        .face--key-b2 {
            background-image: linear-gradient(to bottom, #a7dcfa, #8fd2f8);
        }

        .face--key-b3 {
            background-color: #426585;
        }

        .face--key-o1 {
            background: #ffa28e;
        }

        .face--key-o2 {
            background-image: linear-gradient(to bottom, #bc7377, #b46266);
        }

        .face--key-o3 {
            background-color: #8e3e43;
        }

        .key--down {
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateZ(-5px);
            transition: 0.05s ease;
        }

        .key--down>.key__top {
            background: #ffccc1;
        }

        @keyframes screen {

            0%,
            90%,
            96% {
                background-color: #a9dffd;
            }

            93%,
            100% {
                background-color: rgba(143, 210, 248, 0.8);
            }
        }
    </style>
</head>

<body>
    <div class="main flex" id="m">
        <div class="keyboard flex" id="k">
            <div class="screen flex" id="s"></div>
            <div class="keyboard__front face"></div>
            <div class="keyboard__back face"></div>
            <div class="keyboard__right face"></div>
            <div class="keyboard__left face"></div>
            <div class="keyboard__top face">
                <div class="keys">
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key key--w2 flex">
                        <div class="key__front key__front--w2 face face--key-b3"></div>
                        <div class="key__back key__back--w2 face face--key-b1"></div>
                        <div class="key__right key__right--w2 face face--key-b1"></div>
                        <div class="key__left key__left--w2 face face--key-b2"></div>
                        <div class="key__top key__top--w2 face face--key-b1"></div>
                        <div class="key__bottom key__bottom--w2 face face--key-b2"></div>
                    </div>
                </div>
                <div class="keys">
                    <div class="key key--w2 flex">
                        <div class="key__front key__front--w2 face face--key-b3"></div>
                        <div class="key__back key__back--w2 face face--key-b1"></div>
                        <div class="key__right key__right--w2 face face--key-b1"></div>
                        <div class="key__left key__left--w2 face face--key-b2"></div>
                        <div class="key__top key__top--w2 face face--key-b1"></div>
                        <div class="key__bottom key__bottom--w2 face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                </div>
                <div class="keys">
                    <div class="key key--w3 flex">
                        <div class="key__front key__front--w3 face face--key-b3"></div>
                        <div class="key__back key__back--w3 face face--key-b1"></div>
                        <div class="key__right key__right--w3 face face--key-b1"></div>
                        <div class="key__left key__left--w3 face face--key-b2"></div>
                        <div class="key__top key__top--w3 face face--key-b1"></div>
                        <div class="key__bottom key__bottom--w3 face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key key--w2 flex">
                        <div class="key__front key__front--w2 face face--key-o3"></div>
                        <div class="key__back key__back--w2 face face--key-o1"></div>
                        <div class="key__right key__right--w2 face face--key-o1"></div>
                        <div class="key__left key__left--w2 face face--key-o2"></div>
                        <div class="key__top key__top--w2 face face--key-o1"></div>
                        <div class="key__bottom key__bottom--w2 face face--key-o2"></div>
                    </div>
                </div>
                <div class="keys">
                    <div class="key key--w2 flex">
                        <div class="key__front key__front--w2 face face--key-b3"></div>
                        <div class="key__back key__back--w2 face face--key-b1"></div>
                        <div class="key__right key__right--w2 face face--key-b1"></div>
                        <div class="key__left key__left--w2 face face--key-b2"></div>
                        <div class="key__top key__top--w2 face face--key-b1"></div>
                        <div class="key__bottom key__bottom--w2 face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face"></div>
                        <div class="key__back face"></div>
                        <div class="key__right face"></div>
                        <div class="key__left face"></div>
                        <div class="key__top face"></div>
                        <div class="key__bottom face"></div>
                    </div>
                    <div class="key key--w3 flex">
                        <div class="key__front key__front--w3 face face--key-b3"></div>
                        <div class="key__back key__back--w3 face face--key-b1"></div>
                        <div class="key__right key__right--w3 face face--key-b1"></div>
                        <div class="key__left key__left--w3 face face--key-b2"></div>
                        <div class="key__top key__top--w3 face face--key-b1"></div>
                        <div class="key__bottom key__bottom--w3 face face--key-b2"></div>
                    </div>
                </div>
                <div class="keys">
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-o3"></div>
                        <div class="key__back face face--key-o1"></div>
                        <div class="key__right face face--key-o1"></div>
                        <div class="key__left face face--key-o2"></div>
                        <div class="key__top face face--key-o1"></div>
                        <div class="key__bottom face face--key-o2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key key--w6 flex">
                        <div class="key__front key__front--w6 face"></div>
                        <div class="key__back key__back--w6 face"></div>
                        <div class="key__right key__right--w6 face"></div>
                        <div class="key__left key__left--w6 face"></div>
                        <div class="key__top key__top--w6 face"></div>
                        <div class="key__bottom key__bottom--w6 face"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                    <div class="key flex">
                        <div class="key__front face face--key-b3"></div>
                        <div class="key__back face face--key-b1"></div>
                        <div class="key__right face face--key-b1"></div>
                        <div class="key__left face face--key-b2"></div>
                        <div class="key__top face face--key-b1"></div>
                        <div class="key__bottom face face--key-b2"></div>
                    </div>
                </div>
            </div>
            <div class="keyboard__bottom face"></div>
        </div>
    </div>
    <script>const m = document.querySelector('#m'); const k = document.querySelector('#k'); const s = document.querySelector('#s'); const kd = document.querySelectorAll('.key'); let con = 0; let base = (e) => { let x = e.pageX / window.innerWidth - 0.5; let y = e.pageY / window.innerHeight - 0.5; k.style.transform = `perspective(10000px)rotateX(${y * 10 + 60}deg)rotateZ(-${x * 40 + 35}deg)` }; let addKey = (e) => { let kc = event.keyCode; if ((kc >= 65 && kc <= 90) || kc == 32) { if (kc == 81) { kd[15].classList.add('key--down') } else if (kc == 87) { kd[16].classList.add('key--down') } else if (kc == 69) { kd[17].classList.add('key--down') } else if (kc == 82) { kd[18].classList.add('key--down') } else if (kc == 84) { kd[19].classList.add('key--down') } else if (kc == 89) { kd[20].classList.add('key--down') } else if (kc == 85) { kd[21].classList.add('key--down') } else if (kc == 73) { kd[22].classList.add('key--down') } else if (kc == 79) { kd[23].classList.add('key--down') } else if (kc == 80) { kd[24].classList.add('key--down') } else if (kc == 65) { kd[29].classList.add('key--down') } else if (kc == 83) { kd[30].classList.add('key--down') } else if (kc == 68) { kd[31].classList.add('key--down') } else if (kc == 70) { kd[32].classList.add('key--down') } else if (kc == 71) { kd[33].classList.add('key--down') } else if (kc == 72) { kd[34].classList.add('key--down') } else if (kc == 74) { kd[35].classList.add('key--down') } else if (kc == 75) { kd[36].classList.add('key--down') } else if (kc == 76) { kd[37].classList.add('key--down') } else if (kc == 192) { kd[38].classList.add('key--down') } else if (kc == 90) { kd[41].classList.add('key--down') } else if (kc == 88) { kd[42].classList.add('key--down') } else if (kc == 67) { kd[43].classList.add('key--down') } else if (kc == 86) { kd[44].classList.add('key--down') } else if (kc == 66) { kd[45].classList.add('key--down') } else if (kc == 78) { kd[46].classList.add('key--down') } else if (kc == 77) { kd[47].classList.add('key--down') } else if (kc == 13) { kd[39].classList.add('key--down') } else if (kc == 32) { kd[56].classList.add('key--down'); s.innerHTML += '&nbsp;' } s.innerHTML += String.fromCharCode(kc); con++; if (con > 10) { s.innerHTML = ''; con = 0 } } if (kc == 8) { s.innerHTML = ''; kd[27].classList.add('key--down'); con = 0 } }; let removeKey = (e) => { let kc = event.keyCode; if (kc == 81) { kd[15].classList.remove('key--down') } else if (kc == 87) { kd[16].classList.remove('key--down') } else if (kc == 69) { kd[17].classList.remove('key--down') } else if (kc == 82) { kd[18].classList.remove('key--down') } else if (kc == 84) { kd[19].classList.remove('key--down') } else if (kc == 89) { kd[20].classList.remove('key--down') } else if (kc == 85) { kd[21].classList.remove('key--down') } else if (kc == 73) { kd[22].classList.remove('key--down') } else if (kc == 79) { kd[23].classList.remove('key--down') } else if (kc == 80) { kd[24].classList.remove('key--down') } else if (kc == 65) { kd[29].classList.remove('key--down') } else if (kc == 83) { kd[30].classList.remove('key--down') } else if (kc == 68) { kd[31].classList.remove('key--down') } else if (kc == 70) { kd[32].classList.remove('key--down') } else if (kc == 71) { kd[33].classList.remove('key--down') } else if (kc == 72) { kd[34].classList.remove('key--down') } else if (kc == 74) { kd[35].classList.remove('key--down') } else if (kc == 75) { kd[36].classList.remove('key--down') } else if (kc == 76) { kd[37].classList.remove('key--down') } else if (kc == 192) { kd[38].classList.remove('key--down') } else if (kc == 90) { kd[41].classList.remove('key--down') } else if (kc == 88) { kd[42].classList.remove('key--down') } else if (kc == 67) { kd[43].classList.remove('key--down') } else if (kc == 86) { kd[44].classList.remove('key--down') } else if (kc == 66) { kd[45].classList.remove('key--down') } else if (kc == 78) { kd[46].classList.remove('key--down') } else if (kc == 77) { kd[47].classList.remove('key--down') } else if (kc == 32) { kd[56].classList.remove('key--down') } else if (kc == 13) { kd[39].classList.remove('key--down') } else if (kc == 8) { kd[27].classList.remove('key--down') } }; m.addEventListener('mousemove', base); window.addEventListener('keydown', addKey); window.addEventListener('keyup', removeKey);</script>
</body>

</html>